import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import { Steps } from 'antd';
const Step = Steps.Step;



import examActions from '../action'
import appActions from '../../app/action'

import Step0 from './step/step0';
import Step1 from './step/step1';
import Step2 from './step/step2';
import Step3 from './step/step3';
import Step4 from './step/step4';

const steps = [{
  title: '创建考试'
}, {
  title: '添加考场'
}, {
  title: '导入试题'
},{
  title: '导入学员'
},{
  title: '生成考试'
}];

export class ExamDetail extends Component {

  state = {
    current : 0
  }

  constructor (props) {
    super(props);
  }

  componentDidMount () {
    const { examActions } = this.props;
    console.log(this.props.params);
  }

  next () {
    this.setState({
      current : this.state.current + 1
    })
  }

  previous () {
    this.setState({
      current : this.state.current - 1
    })
  }

  render() {

    // console.log(this.props.params.$loki);

    const { current } = this.state;
    const $loki = parseInt(this.props.params.$loki) || 0;
    return (
      <div className="ant-detail-wraper">
        <Steps current={current} className="ant-detail-step">
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>

        {
          current === 0 && <Step0 $loki={$loki} {...this.props} next={this.next.bind(this)} prev={this.previous.bind(this)} />
        }

        {
          current === 1 && <Step1 $loki={$loki} {...this.props} next={this.next.bind(this)} prev={this.previous.bind(this)} />
        }

        {
          current === 2 && <Step2 $loki={$loki} {...this.props} next={this.next.bind(this)} prev={this.previous.bind(this)} />
        }

        {
          current === 3 && <Step3 $loki={$loki} {...this.props} next={this.next.bind(this)} prev={this.previous.bind(this)} />
        }

        {
          current === 4 && <Step4 $loki={$loki} {...this.props} next={this.next.bind(this)} prev={this.previous.bind(this)} />
        }

      </div>
    )
  }

}

export default connect((state)=>{
  return  {
    exam : state.get('exam')
  }
},dispatch => {
  return {
    examActions : bindActionCreators(examActions, dispatch),
    appActions : bindActionCreators(appActions, dispatch)
  }
})(ExamDetail);
